"use client";
import { AgentPayInfo, claimAgentPayReward, getAgentPayInfo } from "@/api/activity";
import AdSwiperBox from "@/components/AdSwiperBox";
import CustomButton from "@/components/CustomButton";
import InviteBox from "@/components/InviteBox";
import ShareText from "@/components/ShareText";
import { useRouter } from "@/i18n/routing";
import { formatAmount } from "@/utils";
import { Toast } from "antd-mobile";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import React from "react";
import styles from "./page.module.scss";

const Page = () => {
    const router = useRouter();
    const [data, setData] = React.useState<AgentPayInfo>();
    const t = useTranslations();

    React.useEffect(() => {
        getInfo();
    }, []);

    const getInfo = async () => {
        const res = await getAgentPayInfo();
        if (res.code === 200) {
            setData(res.data);
        }
    };

    const doClaim = async () => {
        Toast.show({ icon: "loading" });
        try {
            const res: any = await claimAgentPayReward();
            if (res.code === 200 && res?.data?.code === 0) {
                Toast.show({ content: t("code.200") });
                return;
            }
            throw new Error(res.code.toString());
        } catch (err: any) {
            Toast.show({ icon: "fail", content: t(`code.${err?.message || 400}`) });
        }
    };

    return (
        <div className="p-[.1rem]">
            <InviteBox></InviteBox>
            <div className={clsx(styles.box)}>
                <div className="flex items-center border-b-[1px] border-[var(--textColor4)] pb-[.1rem]">
                    <div className="flex flex-1 flex-col items-center border-r-[1px] border-[var(--textColor4)] py-[.04rem]">
                        <div className="text-[14px] font-normal">Convidados</div>
                        <div className="mt-[.06rem] flex items-center">
                            <i className="iconfont icon-fangke2 mr-[.1rem] text-[22px] text-[var(--textColor4)]"></i>
                            <span className="text-[18px] font-black">
                                {data?.total_user_num || 0}
                            </span>
                        </div>
                    </div>
                    <div className="flex flex-1 flex-col items-center py-[.04rem]">
                        <div className="text-[14px] font-normal">Total promocional</div>
                        <div className="mt-[.06rem] flex items-center">
                            <span className="text-[18px] font-black text-[var(--textColor4)]">
                                R$ {formatAmount(data?.total_pay_amount || 0)}
                            </span>
                        </div>
                    </div>
                </div>
                <div className="flex flex-col items-center pb-[.05rem] pt-[.15rem]">
                    <div>Usuários que recarregaram</div>
                    <div className="mt-[.06rem] flex items-center">
                        <i className="iconfont icon-fangke2 mr-[.1rem] text-[22px] text-[var(--textColor4)]"></i>
                        <span className="text-[18px] font-black">{data?.direct_user_num || 0}</span>
                    </div>
                    <div className="mt-[.25rem]">Pode ser resgatado</div>
                    <span className="mt-[.15rem] text-[24px] font-black text-[var(--textColor4)]">
                        R$ {formatAmount(data?.reward_amount || 0)}
                    </span>
                    <CustomButton
                        className="mt-[.1rem] !w-[1.5rem] !py-[.08rem]"
                        disabled={!data?.reward_amount || data?.reward_amount <= 0}
                        onClick={doClaim}
                    >
                        Receba
                    </CustomButton>
                </div>
            </div>
            <div className="mt-[.1rem] flex items-center justify-between">
                <CustomButton className={styles.agentBtn} onClick={() => router.push("/fission")}>
                    <i className="iconfont icon-hongbao mr-[.1rem] scale-[1.6] transform text-[var(--primary-button)]"></i>
                    <span className="text-[var(--textColor1)]">Agente</span>
                </CustomButton>
                <CustomButton
                    className={styles.agentBtn}
                    onClick={() => router.push("/raffleWheel")}
                >
                    <i className="iconfont icon-spin mr-[.1rem] scale-[1.1] transform text-[var(--primary-button)]"></i>
                    <span className="text-[var(--textColor1)]">Ganhe R$100</span>
                </CustomButton>
            </div>
            <div className={styles.toRank} onClick={() => router.push("/rank")}>
                <img className={styles.adBg} src="/fission/jackpot_bg.webp" alt="" />
                <div className="absolute bottom-[0] left-[.3rem] top-[0] flex flex-col items-center justify-center pb-[.05rem]">
                    <div className="text-[16px] font-black text-[var(--textColor3)]">
                        Ranking de Agentes
                    </div>
                    <div
                        className={clsx(
                            "agentesRank tect-[14px] relative flex w-fit items-center justify-center rounded-[20px] px-[32px] py-[4px] font-black text-[var(--textColor3)]",
                            styles.toRankBtn
                        )}
                    >
                        Entrar
                    </div>
                </div>
            </div>
            <div className="mt-[15px] flex flex-col gap-[10px] break-all rounded-[var(--borderRadius)] bg-[#fff] p-[15px] py-[20px] text-[12px]">
                <span>
                    Quando o amino que você convidou fizer uma recarga, você receberá{" "}
                    <span className="text-[var(--textColor4)]">
                        {(data?.direct_commission_rate || 0) * 100}%
                    </span>{" "}
                    do valor recarregado porele
                </span>
                <span>
                    Quando o amigo que o seu amigo convidou fizer uma recarga, você receberá{" "}
                    <span className="text-[var(--textColor4)]">
                        {" "}
                        {(data?.secondary_commission_rate || 0) * 100}%
                    </span>{" "}
                    do valor recarregado por ele.
                </span>
                <span>
                    Você receberá uma comissão sobre cada recarga, então quanto mais recargas forem
                    feitas, maior será o seu ganho!
                </span>
                <img src="/agent/H7_yaoqing_zhishitu_icon.webp" alt="" />
            </div>
            <div className="mt-[15px] px-[15px] text-[14px] text-[var(--textColor2)]">
                Prêmio obtido
            </div>
            <div className="mt-[.1rem] rounded-[var(--borderRadius)] bg-[#fff]">
                <div className="flex items-center justify-between">
                    <div className="flex-1 py-[.08rem] text-center">Nome</div>
                    <div className="flex-1 py-[.08rem] text-center">Valor</div>
                    <div className="flex-1 py-[.08rem] text-center">Recompensa</div>
                </div>
                {!!data?.commissions?.length &&
                    data.commissions.map((item) => {
                        return (
                            <div key={item.user_id} className="flex items-center justify-between">
                                <div className="flex-1 py-[.08rem] text-center">{item.user_id}</div>
                                <div className="flex-1 py-[.08rem] text-center">
                                    {item.pay_amount}
                                </div>
                                <div className="flex-1 py-[.08rem] text-center">
                                    {item.commission_amount}
                                </div>
                            </div>
                        );
                    })}
                {!data?.commissions?.length && (
                    <div className="flex items-center justify-center py-[1.5rem] text-[12px]">
                        Sem dados disponíveis
                    </div>
                )}
            </div>
            <ShareText text={data?.agent_text}></ShareText>
            <AdSwiperBox
                className="mt-[.1rem]"
                text={data?.agent_text}
                images={data?.agent_images}
            ></AdSwiperBox>
        </div>
    );
};

export default Page;